<template>
  <div :class="styles['student-dashboard']">
    <!-- 顶部导航栏 -->
    <header :class="styles['header']">
      <div :class="styles['header-left']">
        <div :class="styles['logo']">
          <img src="/exam-ai-logo.svg" alt="Exam AI" :class="styles['logo-img']">
          <span :class="styles['logo-text']">Exam AI</span>
        </div>
      </div>
      <div :class="styles['header-right']">
        <div :class="styles['user-info']">
          <span :class="styles['user-name']">{{ user?.name || user?.username }}</span>
          <span :class="[styles['user-role'], styles['student-badge']]">学生</span>
        </div>
        <button @click="handleLogout" :class="styles['logout-btn']">
          <span :class="styles['logout-icon']">🚪</span>
          退出
        </button>
      </div>
    </header>
    <div :class="styles['main-content']">
      <!-- 侧边栏 -->
      <aside :class="styles['sidebar']">
        <nav :class="styles['nav-menu']">
          <router-link to="/student" :class="styles['nav-item']" exact-active-class="active">
            <span :class="styles['nav-icon']">📊</span>
            <span :class="styles['nav-text']">仪表板</span>
          </router-link>
          <router-link to="/student/exam-list" :class="styles['nav-item']" exact-active-class="active">
            <span :class="styles['nav-icon']">📝</span>
            <span :class="styles['nav-text']">我的考试</span>
          </router-link>
          <router-link to="/student/history" :class="styles['nav-item']" exact-active-class="active">
            <span :class="styles['nav-icon']">📚</span>
            <span :class="styles['nav-text']">考试历史</span>
          </router-link>
          <router-link to="/student/profile" :class="styles['nav-item']" exact-active-class="active">
            <span :class="styles['nav-icon']">👤</span>
            <span :class="styles['nav-text']">个人资料</span>
          </router-link>
        </nav>
      </aside>
      <!-- 内容区 -->
      <main :class="styles['content']">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import styles from '@/styles/student/dashboard.module.css'

const router = useRouter()
const authStore = useAuthStore()
const user = computed(() => authStore.user)

const handleLogout = async () => {
  await authStore.logout()
  router.push('/login')
}
</script>